import { renderIconKey } from '@/utils/tools'
import { NButton, NCard, NGrid, NGridItem, NPagination, NPopover, NScrollbar } from 'naive-ui'
import { defineComponent, ref, createVNode, toRef, computed } from 'vue'
import * as icc from '@vicons/ionicons5'

let iccs = icc as any

export default defineComponent({
  name: 'iconSelector',
  emits: ['updateValue'],
  props: {
    defaultValue: {
      type: String,
    },
  },
  setup(props, { emit }) {
    const defaultIcon = toRef(props, 'defaultValue')
    const iccKeyList = ref(Object.keys(iccs))
    const page = ref(1)
    const spliceArray = computed(() => {
      return [...iccKeyList.value].splice((page.value - 1) * 20, page.value * 20)
    })

    return {
      defaultIcon,
      iccKeyList,
      page,
      spliceArray,
      emit,
    }
  },
  render() {
    const { defaultIcon, iccKeyList, page, emit } = this

    return createVNode(
      NPopover,
      {},
      {
        trigger: () => {
          return createVNode(
            NButton,
            {},
            {
              default: () => {
                return defaultIcon === '' ? '请选择图标' : defaultIcon
              },
              icon() {
                return renderIconKey((defaultIcon === '' ? 'Alert' : defaultIcon) as string, '')
              },
            }
          )
        },
        default: () => [
          createVNode(
            NScrollbar,
            { class: 'grid-wrapper' },
            {
              default: () => {
                return createVNode(
                  NGrid,
                  { cols: 4, style: 'height: 130px' },
                  {
                    default: () => {
                      return this.spliceArray.map((item) =>
                        createVNode(
                          NGridItem,
                          {},
                          {
                            default: () => {
                              return createVNode(
                                'div',
                                {
                                  class:
                                    'flex flex-col items-center justify-center p-1 border border-gray-100 cursor-pointer',
                                  onClick: () => {
                                    emit('updateValue', item)
                                  },
                                },
                                [
                                  renderIconKey(item, '30px'),
                                  createVNode(
                                    'span',
                                    {
                                      class: 'truncate text-xs',
                                      style: 'max-width: 50px;',
                                    },
                                    { default: () => item }
                                  ),
                                ]
                              )
                            },
                          }
                        )
                      )
                    },
                  }
                )
              },
            }
          ),
          createVNode(
            NCard,
            { class: 'flex justify-end mt-2 mb-2' },
            {
              default: () =>
                createVNode(NPagination, {
                  itemCount: iccKeyList.length,
                  pageSize: 20,
                  page: page,
                  onUpdatePage: (p: number) => {
                    this.page = p
                  },
                }),
            }
          ),
        ],
      }
    )
  },
})
